<template>
  <div>
    <ul v-for="(item,i) in list">
      <li>
        <span
          v-if="item.children"
          class="expand"
          @click="expand"
        >{{isShow ?  '-' : '+' }}</span>

        {{item.name}}
        <ul v-if="item.children && isShow">
          <item :list="item.children"></item>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "item",
  props: {
    list: {
      type: Array,
      default: () => {
        return [
          {
            name: "item1",
            children: [
              {
                name: "item2",
                children: [{ name: "item2.1" }]
              },
              {
                name: "item3"
              }
            ]
          },
          {
            name: "item4",
            children: [
              {
                name: "item5"
              },
              {
                name: "item6"
              }
            ]
          }
        ];
      }
    }
  },
  data() {
    return {
      isShow: true
    };
  },
  computed: {},
  created() {},
  methods: {
    expand() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style scoped>
li {
  list-style: none;
}
.expand {
  border: 1px solid #ccc;
  padding: 0 4px;
  margin-right: 2px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
</style>